<template>
  <div class="table-box">
    <div class="table-check-box">
      <div class="item-con-box">
        <div v-for="(item,index) of searchFromJson" :key="index" class="item-con">
          <div class="title">
            <span v-if="item.attribute.ifCheck" class="title-span">*</span>
            {{item.attribute.titName}}
          </div>
          <div class="item">
            <el-input v-if="item.componentName=='stringTem'" v-model.trim="item.attribute.filedValue" :maxLength="item.attribute.maxLength" :placeholder="item.attribute.placeholder"> </el-input>
            <el-input-number v-if="item.componentName=='numberTem'" v-model.trim="item.attribute.filedValue" style="width:100%" :controls="false" :placeholder="item.attribute.placeholder" :min="item.attribute.minValue" :max="item.attribute.maxValue"></el-input-number>
            <el-select v-if="item.componentName=='moreSelectTem'" style="width:100%" v-model="item.attribute.filedValue" filterable :placeholder="item.attribute.placeholder">
              <el-option v-for="(item,index) in item.attribute.selectList" :key="index" :label="item.name" :value="item.name">
                <span style="float: left;color: #3A3A3A;">{{ item.name }}</span>
                <span style="float: right;color: #FF3E85;">{{ item.value }}</span>
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="item-con ">
          <el-button type="primary" icon="el-icon-search" @click="search('search')">搜索</el-button>
          <el-button icon="el-icon-close" @click="search('empty')">清空</el-button>
        </div>
      </div>
    </div>
    <div class="table-check-box">
      <el-table :data="tableData" v-loading="loading" element-loading-text="获取数据中" :stripe="true" max-height="548" :border="true" style="width: 100%;margin-top:16px">
        <el-table-column v-for="(item,index) of FromField" :key="index" align="center" :label="item.attribute.titName" show-overflow-tooltip>
          <template>
            <div style=" text-align: center;">
              {{item.attribute.filedValue}}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div v-if="pageSum" class="sure-box">
        <el-pagination @current-change="needPage" @size-change="handleSizeChange" :current-page="currentPage4" :background="true" :total="pageSum" :page-sizes="[20, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import testJson from "./testJson.json";

export default {
  data() {
    return {
      // thisPage: 1, //当前页数
      //   pageSum: 0, //一共有多少条
      loading: false, //加载条
      tableData: [],
      FromField: [], //报名表单字段
      searchFromJson: [] //搜索动态生成的表单字段
    };
  },
  created() {
    this.getFromField();
  },
  methods: {
    // 得到表单字段
    getFromField() {
      this.FromField = testJson;
      this.searchFromJson = testJson;
    },
    getTableData() {
      // let res
    },
    //搜索
    search(item) {
      if (item == "empty") {
        for (let i = 0; i < this.searchFromJson.length; i++) {
          this.searchFromJson[i].attribute.filedValue = "";
        }
      }
      // if (item == "search") {
      //   if (this.dateSelect) {
      //     this.info.startDate = this.dateSelect[0] + " 00:00:00";
      //     this.info.endDate = this.dateSelect[1] + " 23:59:59";
      //   }
      // }
      // this.initList();
    },
    // =====
    // 分页和选择试卷的时候查询
    changePage() {
      console.log(this.pageId);
      this.loading = true;
      this.thisPage = 1;
      this.$http
        .post("/api/answer/checkExamResultByPage2", {
          currPage: 1,
          id: this.pageId || ""
        })
        .then(
          res => {
            this.loading = false;
            this.tableData = [];
            this.pageSum = 0;
            console.log(res.data, "选择的分数测试评列表");
            if (res.data.length != 0) {
              this.tableData = res.data.data;
              this.pageSum = Number(res.data.count);
            }
          },
          err => {
            this.loading = false;
            this.$message.error("数据查询失败!");
          }
        );
    },
    // 查询选项列表
    optionsFun: function() {
      this.$http.get("/api/answer/getPaperId").then(
        res => {
          this.options = [];
          this.options = res.data;
          console.log(res.data);
        },
        err => {}
      );
    },
    // 分页查询接口
    needPage: function(val) {
      this.thisPage = ` ${val} `;
      console.log(this.thisPage);
      this.loading = true;
      this.$http
        .post("/api/answer/checkExamResultByPage2", {
          currPage: this.thisPage || 1,
          id: this.pageId || ""
        })
        .then(
          res => {
            this.loading = false;
            this.tableData = [];
            this.pageSum = 0;
            console.log(res.data, "选择的分数测试评列表");
            if (res.data.length != 0) {
              this.tableData = res.data.data;
              this.pageSum = Number(res.data.count);
            }
          },
          err => {
            this.loading = false;
            this.$message.error("数据查询失败!");
          }
        );
    },
    // 得到初始数据
    getInitData: function(currPage) {
      this.loading = true;
      this.thisPage = currPage;
      // console.log(currPage);
      this.$http
        .post("/api/answer/checkExamResultByPage", {
          currPage: currPage
        })
        .then(
          res => {
            this.loading = false;
            this.tableData = [];
            this.pageSum = 0;
            console.log(res.data, "测评打分列表啊啊啊啊 ");
            if (res.data.length != 0) {
              this.tableData = res.data.data;
              this.pageSum = Number(res.data.count);
            }
          },
          err => {
            this.loading = false;
            this.$message.error("服务器出小差了哦!");
          }
        );
    }
  }
};
</script>
<style scoped>
.table-box {
  width: 100%;
  height: auto;
}
.table-check-box {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  margin-bottom: 20px;
}

.sure-box {
  width: 100%;
  height: auto;
  text-align: right;
  margin-top: 46px;
}

.item-con-box {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 18px 30px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}

.item-con {
  width: 25%;
  height: auto;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  padding-left: 120px;
  position: relative;
  margin-bottom: 16px;
}

.title {
  padding-right: 8px;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 120px;
  color: #1b0025;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  text-align: right;
  /* border: 1px solid red; */
}
.title-span {
  color: #f56c6c;
}

.item {
  width: 100%;
  height: auto;
}
</style>
